<template>
  <div class="statistics_wrap">
    <div class="statistics_header">
      <span>学习统计</span>
      <span>小组人数(123)</span>
    </div>
    <div class="myinfo_wrap">
      <div class="myinfo">
        <span>我的排名：1名</span>
        <span>学号/账号：123465798</span>
        <span>姓名：LuLu</span>
        <span>完成测试数：10/20</span>
      </div>
    </div>
    <div class="Info_Table">
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :pagination="false"
      >
        <template slot="name" slot-scope="text">
          <a>{{ text }}</a>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "排名",
    dataIndex: "ranking",
  },
  {
    title: "姓名",
    dataIndex: "name",
  },
  {
    title: "Cash Assets",
    className: "column-money",
    dataIndex: "money",
  },
  {
    title: "Address",
    dataIndex: "address",
  },
];

const data = [
  {
    key: "1",
    ranking: "1",
    name: "John Brown",
    money: "￥300,000.00",
    address: "New York No. 1 Lake Park",
  },
  {
    key: "2",

    ranking: "2",
    name: "Jim Green",
    money: "￥1,256,000.00",
    address: "London No. 1 Lake Park",
  },
  {
    key: "3",

    ranking: "3",
    name: "Joe Black",
    money: "￥120,000.00",
    address: "Sidney No. 1 Lake Park",
  },
  {
    key: "4",

    ranking: "4",
    name: "John Brown",
    money: "￥300,000.00",
    address: "New York No. 1 Lake Park",
  },
  {
    key: "5",

    ranking: "5",
    name: "Jim Green",
    money: "￥1,256,000.00",
    address: "London No. 1 Lake Park",
  },
];
export default {
  data() {
    return {
      columns,
      data,
    };
  },
};
</script>

<style lang="less">
  .statistics_wrap {
        width: 55%;
        margin: 0 auto;
        .statistics_header {
          padding: 10px;
          span {
            &:nth-child(1) {
              font-size: 15px;
              margin-right: 5px;
              font-weight: 600;
            }
            &:nth-child(2) {
              font-size: 12px;
              color: #4c8fbd;
            }
          }
        }
        .myinfo_wrap {
          margin-top: 10px;
          padding: 10px;
          background-image: linear-gradient(-90deg, #0390ff, #4c8fbd);
          .myinfo {
            span {
              margin-right: 30px;
              font-size: 14px;
              color: white;
            }
          }
        }
        .Info_Table {
          height: 62vh;
          overflow: auto;
        }
      }
</style>